<template>
	<div class="AddButton">
		<div class="right">
			<div class="topNav"><i class="el-icon-news"></i><p>&nbsp;员工管理表单</p></div>
			
			<div class="rigth_bottom">
				<el-form :model="form"  :inline="true">
					<el-form-item label="员工代码" label-width="130px" required>
				      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入员工代码"></el-input>
				    </el-form-item>
				    <el-form-item label="员工分类" label-width="130px" required>
				      	<el-select v-model="form.region" placeholder="请选择" style="width: 93%;">
				        	<el-option label="普通员工" value="shanghai"></el-option>
				        	<el-option label="公司领导" value="beijing"></el-option>
				      	</el-select>
				    </el-form-item>
				    <el-form-item label="员工姓名" label-width="130px" required>
				      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入员工姓名"></el-input>
				    </el-form-item>
				    <el-form-item label="手机号码" label-width="130px" required>
				      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入手机号码"></el-input>
				    </el-form-item>
					<el-form-item label="岗位名称" label-width="130px" required>
				      	<el-input v-model="form.userId" auto-complete="off" placeholder="请输入岗位名称"></el-input>
				    </el-form-item>
				    <el-form-item label="启用状态" label-width="130px" required>
				      	<el-select v-model="form.region" placeholder="请选择启用状态" style="width: 93%;">
				        	<el-option label="是" value="shanghai"></el-option>
				        	<el-option label="否" value="beijing"></el-option>
				      	</el-select>
				    </el-form-item>
				    <el-form-item label="岗位编号" label-width="130px" required>
				      	<el-input v-model="form.userId" auto-complete="off" placeholder="请输入岗位编号"></el-input>
				    </el-form-item>
				    <el-form-item label="身份证号码" label-width="130px" required>
				      	<el-input v-model="form.userId" auto-complete="off" placeholder="请输入身份证号码"></el-input>
				    </el-form-item>
				</el-form>
				<!--tab标签-->
				<el-tabs v-model="activeName" style="margin:0 50px;">
				    <el-tab-pane label="员工其它信息" name="first">
				    	<!--标签一-->
				    	<el-form :model="form"  :inline="true">
							<el-form-item label="参加工作时间" label-width="100px">
							      	<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 87%;"></el-date-picker>
							    
						    </el-form-item>
						    <el-form-item label="员工分类" label-width="80px">
						      	<el-select v-model="form.region" placeholder="请选择" style="width: 93%;">
						        	<el-option label="普通员工" value="shanghai"></el-option>
						        	<el-option label="公司领导" value="beijing"></el-option>
						      	</el-select>
						    </el-form-item>
						    <el-form-item label="员工姓名" label-width="100px">
						      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入员工姓名"></el-input>
						    </el-form-item>
						    <el-form-item label="手机号码" label-width="110px">
						      	<el-input v-model="form.userName" auto-complete="off" placeholder="请输入手机号码"></el-input>
						    </el-form-item>
							<el-form-item label="岗位名称" label-width="100px">
						      	<el-input v-model="form.userId" auto-complete="off" placeholder="请输入岗位名称"></el-input>
						    </el-form-item>
						    <el-form-item label="启用状态" label-width="110px">
						      	<el-select v-model="form.region" placeholder="请选择启用状态" style="width: 93%;">
						        	<el-option label="是" value="shanghai"></el-option>
						        	<el-option label="否" value="beijing"></el-option>
						      	</el-select>
						    </el-form-item>
						    <el-form-item label="岗位编号" label-width="100px">
						      	<el-input v-model="form.userId" auto-complete="off" placeholder="请输入岗位编号"></el-input>
						    </el-form-item>
						    <el-form-item label="身份证号码" label-width="110px">
						      	<el-input v-model="form.userId" auto-complete="off" placeholder="请输入身份证号码"></el-input>
						    </el-form-item>
						</el-form>
				    	
				    </el-tab-pane>
				    
				    <el-tab-pane label="员工分配信息" name="second">
				    	<!--标签二-->
				    	
				    </el-tab-pane>
				</el-tabs>
				
			</div>
			
		</div>
	</div>
</template>

<script>
	export default{
		name:'AddButton',
		data(){
			return{
				activeName: 'first',
				form: {
		          name: '',
		          region: '',
		          date1: '',
		          date2: '',
		          delivery: false,
		          type: [],
		          resource: '',
		          desc: ''
		        }
			}
		},
		mounted(){
			
		},
		methods:{
			//提交
			onSubmit(){
		        console.log('submit!');
		    }
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.AddButton{
		width: 98%;height: 100%;padding: 10px;background: #f2f2f2;min-width: 1000px;
		.right{
			background:white;height:100%;width: 100%;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-news{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.rigth_bottom{
				width:760px;margin-top: 10px;
			}
		}	
	}
</style>